<template>
  <div class="container">
    <div class="waterfall-container">
      <div
        v-for="(item, index) in items"
        :key="index"
        class="waterfall-item"
      >
        <div style="cursor: pointer" @click="getBlogInfo(item)">
          <div class="waterfall-title">{{ item.title }}</div>
          <div class="waterfall-createBy">{{ item.createBy }}</div>
          <div class="waterfall-content">{{ item.blogDesc }}</div>
        </div>
      </div>
      <div class="paginationList">
        <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" background layout="prev, pager, next" @pagination="getBlogList"  style="margin-bottom: 30px;float: right;margin-right: 10px;"/>
      </div>
    </div>
<!--    <el-card style="background-color: rgba(255,255,255,0.9)" class=" right-item">-->
<!--      <div slot="header" class="attributes">-->
<!--        <b>分类</b>-->
<!--      </div>-->
<!--&lt;!&ndash;      <ul class=" blog-type-ul" style="margin-top: 5px;">&ndash;&gt;-->
<!--&lt;!&ndash;        <li class=" blog-type-li" v-for="cmsType in typeList" :key="cmsType.typeId" @click="selectType(cmsType)"&ndash;&gt;-->
<!--&lt;!&ndash;            :class="cmsType.typeId === typeId? 'activeType':''">&ndash;&gt;-->
<!--&lt;!&ndash;          <div style="display: flex;align-items: center">&ndash;&gt;-->
<!--&lt;!&ndash;            <el-image style="width: 28px;height: 28px; border-radius: 50%; margin-right: 10px" lazy&ndash;&gt;-->
<!--&lt;!&ndash;                      :src="cmsType.typePicLink" v-show="cmsType.typePicType == '0'">&ndash;&gt;-->
<!--&lt;!&ndash;              <div slot="error" style="width: 28px;height: 28px; border-radius: 50%;">&ndash;&gt;-->
<!--&lt;!&ndash;                <i class="el-icon-collection" style="margin-left:6px;"></i>&ndash;&gt;-->
<!--&lt;!&ndash;              </div>&ndash;&gt;-->
<!--&lt;!&ndash;            </el-image>&ndash;&gt;-->
<!--&lt;!&ndash;            <el-image style="width: 28px;height: 28px; border-radius: 50%; margin-right: 10px" lazy&ndash;&gt;-->
<!--&lt;!&ndash;                      :src="cmsType.typePic" v-show="cmsType.typePicType == '1'">&ndash;&gt;-->
<!--&lt;!&ndash;              <div slot="error" style="width: 28px;height: 28px; border-radius: 50%;">&ndash;&gt;-->
<!--&lt;!&ndash;                <i class="el-icon-collection" style="margin-left:6px;"></i>&ndash;&gt;-->
<!--&lt;!&ndash;              </div>&ndash;&gt;-->
<!--&lt;!&ndash;            </el-image>&ndash;&gt;-->
<!--&lt;!&ndash;            {{cmsType.typeName}}&ndash;&gt;-->
<!--&lt;!&ndash;          </div>&ndash;&gt;-->
<!--&lt;!&ndash;          <div>{{cmsType.blogNum}}</div>&ndash;&gt;-->
<!--&lt;!&ndash;        </li>&ndash;&gt;-->
<!--&lt;!&ndash;      </ul>&ndash;&gt;-->
<!--&lt;!&ndash;      <div class="more" @click="dealType">&ndash;&gt;-->
<!--&lt;!&ndash;        <i v-if="moreType" class="el-icon-arrow-down"></i>&ndash;&gt;-->
<!--&lt;!&ndash;        <i v-else class="el-icon-arrow-up"></i>&ndash;&gt;-->
<!--&lt;!&ndash;      </div>&ndash;&gt;-->
<!--    </el-card>-->
  </div>
</template>

<script>
import {cmsListBlog} from "@/api/cms/blog";
import {
  Loading
} from 'element-ui';

export default {
  name: "index",
  data() {
    return {
      items: [],
      columns: 3, // 假设我们有三列
      columnHeights: [0, 0, 0], // 每列的高度数组
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        type: 2,
      },
    }
  },
  mounted() {
    this.getBlogList();
  },
  methods: {
    getBlogList() {
      cmsListBlog(this.queryParams).then(response => {
        this.items = response.rows;
        this.total = response.total;
      }).finally(()=>{

      });
    },
    getBlogInfo(item) {
      this.$router.push({
        path: '/blogDetail',
        query: {
          id: item.id,
          title: item.title,
          desc: item.createTime
        }
      });
    },
  }
}
</script>

<style scoped lang="scss">
.container {
  display: flex;
  justify-content: center;

  .waterfall-container {
    margin-top: 7.5em;
    margin-bottom: 7.5em;
    width: 840px;
    padding: 10px;
  }

  .waterfall-item {
    width: 100%;
    padding: 20px;
    padding-bottom: 2.5em;
    margin-top: 2.5em;
    border-bottom: 1px solid #ececec;
    display: flex;
    flex-direction: column;
    .waterfall-title {
      font-weight: 400px;
      font-size: 1.8em;
      line-height: 1.5em;
      margin-bottom: 1em;
    }
    .waterfall-createBy {
      margin-bottom: 1em;
      font-size: 1em;
      line-height: 1.8em;
      color: #666666;
    }
    .waterfall-content {
      font-size: 1.230769230em;
      line-height: 1.969230769em;
      font-weight: normal;
      color: #555555;
      letter-spacing: 1px;
    }
  }
}
.blog-type-ul {
  padding-left: 10px;
  padding-right: 10px;
  margin-bottom: 0;
  border-radius: 5px;
}
.right-item {
  margin-top: 7.5em;
  width: 300px;
  height: 200px;
}
.activeType {
  background-color: rgba(58, 142, 230, 0.3);
  cursor: pointer;
}
.paginationList {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
